import './BottomBar.scss';

import React from 'react';

import { NavLink, withRouter } from 'react-router-dom';

import { connect } from 'react-redux';

import { changeTab } from '../../redux/actions/tabAction';

class BottomBar extends React.Component {
  clickTab(key) {
    this.props.changeTab(key);
  }

  renderItems() {
    const { tabs } = this.props;

    return tabs.map((tab, index) => {
      const { key } = tab;
      const { name } = tab;
      const cls = `${key} tab-item`;

      return (
        <NavLink
          to={`/${key}`}
          activeClassName="active"
          key={index}
          className={cls}
          onClick={() => this.clickTab(key)}>
          <div className="tab-icon" />
          <div className="tab-name">{name}</div>
        </NavLink>
      );
    });
  }

  render() {
    return (
      <div className="bottom-bar">
        {this.renderItems()}
      </div>
    );
  }
}

const mapStateToProps = state => ({
  tabs: state.tabReducer.tabs,
  activeKey: state.tabReducer.activeKey,
});

const createActions = { changeTab };

export default withRouter(connect(mapStateToProps, createActions)(BottomBar));
